<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>mamma</title>

<link rel="shortcut icon" href="../image/icon_mamma.ico">
<link rel="stylesheet" href="../js/jquery-ui-1.11.1.custom/jquery-ui.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="../css/friends/friends.css">
	
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/jquery-ui-1.11.1.custom/jquery-ui.min.js"></script>
<script src="../js/imgLiquid-min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	var checkSize = 160; var sendSize = 160;
	
 	// 친구요청 크기 조정
	var checkListSize = $('#recieveRequestList').attr('data-list-size');
 	if(checkListSize == null) {
 		checkListSize = 0;	checkSize = 70;
 	}
	$('#recieveRequestList').css('height', (checkListSize*120)+'px');
	$('#alarm').css('height', (checkSize+checkListSize*120)+'px');
	
	// 보낸 요청 크기 조정
	var sendListSize = $('#sendRequestList').attr('data-list-size');
	if(sendListSize == null) {
		sendListSize = 0; sendSize = 70;
	}
	$('#sendRequestList').css('height', (sendListSize*120)+'px');
	$('#sendRequest').css('height', (sendSize+sendListSize*120)+'px');
	
	// 추천친구 조정
	var recommendListSize = $('#recommend div.resultList').attr('data-list-size');
	if(recommendListSize == null) recommendListSize = 0;
	$('#recommend div.resultList').css('height', (recommendListSize*120)+'px');
	$('#recommend').css('height', (70+recommendListSize*120)+'px');
	
	searchMenu('../friends/');
	profileMenu();
	deatailSearch();
	$('div.photo').imgLiquid();
	
	
	// ad
	
	$.ajax({
		url: "../admin/loadAd.action"
		, type: "POST"
		, dataType: "json"
		, data: {id: 1}
		, success: function(json){
			var banner = json.banner;
			var src = "";
			var href= "";
			if(banner.savedFile == ' '){
				src = "<img src='../image/profile.png'>";
				href = "#";
			}
			else {
				src = "<img src='../photoData/"+banner.savedFile+"'>";
				href = banner.link;
			}
			
			$('#adLink').attr('href', href);
			$('#sponsor').html(src);
			$('#sponsor').imgLiquid();
		}
	});
});

function friendAllow(requestEmail, id){
	$.ajax({
		url: "../friends/friendAllow.action"
		, type: "POST"
		, dataType: "json"
		, data: {
			requestEmail: requestEmail
			, friendId: id
		}
		, success: function(){
			var html = '<i class="fa fa-check-square"></i> 등록 완료';
			$('button[data-num="'+id+'"]').html(html);
			$('button[data-num="'+id+'"]').css('background-color', '#FF5459');
			$('button[data-num="'+id+'"]').css('color', 'white');
			$('button[data-num="'+id+'"]').css('border', '0');
		}
	});
}

function profileMenu() {
	$('div.info').click(function(){
		$('#profileMenu').toggle();	
	});
}

function deatailSearch(){
	$('input[data-find="name"]').blur(function(){
		goSearch();
	});
	$('input[data-find="nickname"]').blur(function(){
		goSearch();
	});
	$('select[data-find="state"]').change(function(){
		goSearch();
	});
	$('input[data-find="findEmail"]').blur(function(){
		goSearch();
	});
	
	function goSearch(){
		var name = $('#name').val();
		var nickname = $('#nickname').val();
		var state = $('#state').val();
		var findEmail = $('#findEmail').val();
		
		if(name == '' && nickname == '' && state == '' && findEmail == ''){
			$('#finderList').css('height', '0');
			$('#finder').css('height', '160px');
			$('#finderList').html('');
			$('#finder img').show();
			$('#finder hr').hide();
			$('#finder').fadeOut();
			$('#alarm').show();
			$('#sendRequest').show();
		}
		else {
			var formData = $('#specificFindForm').serialize();
			$('#finderList').html('');
			$('#alarm').hide();
			$('#sendRequest').hide();
			$('#finder').fadeIn();
			
			$.ajax({
				url: "../friends/searchMemberDetail.action"
				, type: "POST"
				, dataType: "json"
				, data: formData
				, success: function(json){
					$('#finder hr').show();
					$('#finder img').hide();
					var list = json.searchDetailList;
					var html = "";
					
					for(var i = 0; i < list.length; i++){
						html += "<div class='result'>";
						html += '<a href="../member/goHome.action?email='+list[i].email+'">';
						html += '<div class="photo">';
						if(list[i].savedFile == null){
							html += '<img src="../image/profile.png">';
						}	
						else{
							html += '<img src="../photoData/'+list[i].savedFile+'">';
						}		
						html += '</div></a>';
						html += '<div class="information"><br>';
						html += '<span class="resultName">';
						html += '<a href="../member/goHome.action?email='+list[i].email+'">';
						html += (list[i].name + '</a>');
						html += '</span>';
						html += '<span class="resultNickname">('+list[i].nickname+')</span>';
						html += '</div>';
						html += '<div class="check">';
						if(list[i].email == '<s:property value='loginId' />'){
							html += '<button class="profile" onclick="../photo/profileUploadForm.action?email='+list[i].email+'">';
							html += '프로필 편집';
						}
						else if(list[i].status == null){
							html += '<button data-email="'+list[i].email+'" class="send" onclick="';
							html += "javascript:request('"+list[i].email+"')";
							html += '">"';
							html += '<i class="fa fa-check-square"></i> 친구 요청';
						}
						else {
							html += '<button class="done">';
							html += '<i class="fa fa-users"></i> 친구 사이';
						}
						html += '</button></div></div>';
					}
					$('#finderList').css('height', (list.length*120)+'px');
					$('#finder').css('height', (200+list.length*120)+'px');
					$('#finderList').html(html);
					$('#finder .photo').imgLiquid();
				}
			});
		}
	}
}

//request
function request(email){
	$.ajax({
		url: "../friends/sendRequest.action"
		, type: "POST"
		, dataType: "json"
		, data: {
			email: email
		}
		, success: function(){
			var html = '<i class="fa fa-check-square"></i> 요청 완료';
			var button = $('button[data-email="'+email+'"]');
			button.html(html);
			button.css('background-color', '#FF5459');
			button.css('color', 'white');
			button.css('border', '0');
			button.click(false);
			setTimeout(function(){
				var html = '<i class="fa fa-times"></i> 요청 취소';
				button.html(html);
				button.removeClass('sendRequest');
				button.addClass('cancelRequest');
				button.attr('onclick', "javascript:cancelRequest('"+email+"')");
				button.click(true);
			}, 2000);
		}
	});
}

function cancelRequest(email){
	$.ajax({
		url: "../friends/cancelRequest.action"
		, type: "POST"
		, dataType: "json"
		, data: {
			email: email
		}
		, success: function(){
			var html = '<i class="fa fa-check-square"></i> 친구 요청';
			var button = $('button[data-email="'+email+'"]');
			button.html(html);
			button.addClass('sendRequest');
			button.removeClass('cancelRequest');
			button.attr('onclick', "javascript:request('"+email+"')");
			button.click(true);
		}
	});
}

</script>

</head>
<body>
<jsp:include page="../account/header.jsp" />

<!-- 메인 콘텐츠 부분 -->
<div id="home">
	<div id="all">
		<div id="main">
			<!-- friends alarm -->
			<div id="alarm" class="request">
				<br>
				<s:if test="%{friendUpdateList == null || friendUpdateList.size() == 0}">
					<span class="nothing">새로운 친구 요청 없음</span>
				</s:if>
				<s:else>
					<br>
					<span class="find">친구 요청</span>
					<hr>
					<br>
						<div id="recieveRequestList" class="checkList" 
							data-list-size="<s:property value='friendUpdateList.size()' />">
							<s:iterator var="vo" value="friendUpdateList">
								<div class="result">
									<a href="../member/goHome.action?email=<s:property value="requestEmail" />">
										<div class="photo">
										<s:if test="%{savedFile == null}">
											<img src="../image/profile.png">
										</s:if>
										<s:else>
											<img src="../photoData/<s:property value='savedFile' />">
										</s:else>
										</div>
									</a>
									<div class="information">
										<br>
										<span class="resultName">
											<a href="../member/goHome.action?email=<s:property value="requestEmail" />">
												<s:property value="name" />
											</a>
										</span>
										<span class="resultNickname">(<s:property value="nickname" />)</span>
										<span class="resultInputdate"><s:property value="inputdate" /></span>
									</div>
									<div class="check">
										<button data-num="<s:property value='id' />"
											onclick='javascript:friendAllow("<s:property value='requestEmail' />", "<s:property value='id' />")'>
											<i class="fa fa-circle-o"></i> 요청확인
										</button>
									</div>
								</div>
							</s:iterator>
						</div>
				</s:else>
			</div>
			<br>
			
			<!-- send request -->
			<div id="sendRequest" class="request">
				<br>
				<s:if test="%{myRequestList == null || myRequestList.size() == 0}">
					<span class="nothing">보낸 친구 요청 없음</span>
				</s:if>
				<s:else>
					<br>
					<span class="find">친구 요청</span>
					<hr>
					<br>
						<div id="sendRequestList" class="checkList" 
							data-list-size="<s:property value='myRequestList.size()' />">
							<s:iterator var="vo" value="myRequestList">
								<div class="result">
									<a href="../member/goHome.action?email=<s:property value="email" />">
										<div class="photo">
										<s:if test="%{savedFile == null}">
											<img src="../image/profile.png">
										</s:if>
										<s:else>
											<img src="../photoData/<s:property value='savedFile' />">
										</s:else>
										</div>
									</a>
									<div class="information">
										<br>
										<span class="resultName">
											<a href="../member/goHome.action?email=<s:property value="email" />">
												<s:property value="name" />
											</a>
										</span>
										<span class="resultNickname">(<s:property value="nickname" />)</span>
										<span class="resultInputdate"><s:property value="inputdate" /></span>
									</div>
									<div class="check">
										<button class="cancelRequest" data-email="<s:property value="email" />" 
										onclick='javascript:cancelRequest("<s:property value="email" />")'>
											<i class="fa fa-times"></i> 요청 취소
										</button>
									</div>
								</div>
							</s:iterator>
						</div>
				</s:else>
			</div>
			<br>
			
			<!-- finder -->
			<div id="finder" class="request">
				<br>
				<span class="find">친구 상세 검색</span><img src="../image/signup/ajax-loader.gif" />
				<hr>
				<br>
				<div id="finderList" class="checkList">	</div>
			</div>
			<br>
			
			<!-- friends recommend -->
			<div id="recommend">
				<br>
				<span class="find">추천 친구</span>
				<hr>
				<br>
				<div class="resultList" data-list-size="3">
					<div class="result">
						<div class="photo"></div>
						<div class="information">
							<br>
							<span class="resultName">이름</span>
							<span class="resultNickname">(닉네임)</span><br><br>
							<span class="resultEmail">이메일</span>
						</div>
						<div class="button">
							<button class="send">
								<i class="fa fa-plus-square"></i> 친구 요청
							</button>
						</div>
					</div>
					
					<div class="result">
						<div class="photo"></div>
						<div class="information">
							<br>
							<span class="resultName">이름</span>
							<span class="resultNickname">(닉네임)</span><br><br>
							<span class="resultEmail">이메일</span>
						</div>
						<div class="button">
							<button class="send">
								<i class="fa fa-plus-square"></i> 친구 요청
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div id="other">
		
			<!-- specific find -->
			<div id="specific">
			<form action="" name="searchVo" id="specificFindForm" method="POST">
				<br>
				<span class="find">친구 검색</span>
				<br>
				<hr>
				<br>
				<span class="list">이름</span><br>
				<input type="text" name="searchVo.name" id="name"
					class="input" data-find="name" placeholder="이름을 입력하세요" />	
				<br><br>
				
				<span class="list">닉네임</span><br>
				<input type="text" name="searchVo.nickname" id="nickname" 
					class="input" data-find="nickname" placeholder="이메일을 입력하세요" />	
				<br><br>
				
				<span class="list">지역</span><br>
					<s:select class="input inputState" data-find="state" list="#{'서울': '서울', 
					'경기': '경기', '인천': '인천', '강원': '강원',
					'충남': '충남', '충북': '충북', '대전': '대전', 
					'세종': '세종', '부산': '부산',	'울산': '울산', 
					'대구': '대구', '경북': '경북', '경남': '경남', 
					'광주': '광주', '전북': '전북', '전남': '전남', 
					'제주': '제주'}" id="state" name="searchVo.state" 
					headerKey="" headerValue="==지역==" required="true" />
				<br><br>
				
				<span class="list">함께 아는 친구</span><br>
				<input name="searchVo.findEmail" type="text" id="findEmail"
					class="input" data-find="findEmail" placeholder="친구를 입력하세요" />
			</form>
			</div>
			
			<br>
			<!-- sponsor -->
			<a id="adLink" href="#">
				<div id="sponsor"></div>
			</a>
		
		</div>
	</div>
</div>
</body>
</html>